<!--候诊队列&信息发布-->
<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-waiting-queue-info-widget flex-box">
      <div class="list-inside flex-box-left">
        <template v-if="true">
          <div
              class="header-area waiting-item"
              :style="getStyle('head')"
              v-if="(optionsInfo.headShow)"
          >
            <template v-for="(item) in (optionsInfo.colOptions)">
              <div class="item" v-if="getColShow(item.value)" :class="getClassName(item.value)">
                {{ item.label }}
              </div>
            </template>
          </div>
          <div class="list-area" :style="getStyle('list')">
            <div class="waiting-item"
                 v-for="(item) in (waitingPatientInfos)"
                 :key="item.workerId"
                 :style="getStyle('listItem')">
              <template v-for="(items) in (optionsInfo.colOptions)">
                <template v-if="getColShow(items.value)">
                  <div class="item" :class="getClassName(items.value)">
                    <template v-if="(items.value!=='treatingPatient')&&(items.value!=='waitPatientList')">
                    <span :class="{'item-inside':(optionsInfo.itemShadow)}">
                      <!--候诊的人数-->
                      <template v-if="(items.value==='waitPatientCount')">
                          <div class="scroll-item-inside">
                              {{ item[items.value] || '\u00a0' }}
                          </div>
                      </template>
                      <!--号别-->
                      <template v-if="(items.value==='registerObjNames')">
                        <span>
                          <ScrollX>{{ item[optionsInfo.registerObjNameKey] || item['registerObjName'] }}</ScrollX>
                        </span>
                      </template>
                      <template v-else>
                        <span>
                          <ScrollX>{{ getColContent(item, (items.value)) }}</ScrollX>
                        </span>
                      </template>
                    </span>
                    </template>
                    <template v-if="items.value==='treatingPatient'">
                      <span v-if="!!getCurrentPatient(item)">
                        <ScrollX>{{ getCurrentPatient(item) }}</ScrollX>
                      </span>
                    </template>
                    <template v-if="items.value==='waitPatientList'">
                      <template v-if="(optionsInfo.openScroll)">
                        <vue-seamless-scroll
                            :ref="`scroll-${item.workerId}`"
                            class="scroll"
                            @ScrollEnd="handleScrollEnd"
                            :class-option="classOptionTips"
                            :data="item.waitPatientList"
                        >
                          <div class="inside-content">
                          <span class="patient" v-for="(item,index) in (item.waitPatientList)" :key="item.queuingId">
                            <template v-if="!!(item.orderNo)">
                              {{ item.orderNo || '' }}
                            </template>
                            <template v-if="!!(item.patientName)">
                              {{ item.patientName || '' }}
                            </template>
                          </span>
                          </div>
                        </vue-seamless-scroll>
                      </template>
                      <template v-else>
                        <div class="no-scroll">
                          <div class="inside-content">
                          <span class="patient" v-for="(item,index) in (item.waitPatientList)" :key="item.queuingId">
                            <template v-if="!!(item.orderNo)">
                              {{ item.orderNo || '' }}
                            </template>
                            <template v-if="!!(item.patientName)">
                              {{ item.patientName || '' }}
                            </template>
                          </span>
                          </div>
                        </div>
                      </template>
                    </template>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </template>
      </div>
      <div class="info-publish flex-box-right">
        <template v-if="true">
          <div class="header-area waiting-item">
            {{ optionsInfo.headerTitle }}
          </div>
          <div class="list-area" :style="getStyle('list')">
            <div class="list-area-wrap">
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <div class="container">
                  <template v-if="optionsInfo.infoContent.tabsName ==='textarea'">
                    <ScrollY :content="optionsInfo.infoContent.textContent || ''" :pageDuration="10"/>
                  </template>
                  <template v-else-if="optionsInfo.infoContent.tabsName ==='video'">
                    <div class="video-wrapper">
                      <div class="video-area" ref="videoInfo" v-if="devType">
                        <i class="el-icon-video-play"></i>
                      </div>
                      <video class="video" preload='auto' controls="controls" autoplay @ended="(e)=>handleEnded(e)"
                             v-if="!devType" :key="widgetKey">
                        <source :src="getSource()" type="video/mp4"/>
                        <source :src="getSource()" type="video/ogg"/>
                        很抱歉 , 当前浏览器不支持现有视频格式 ~
                      </video>
                    </div>
                  </template>
                  <template v-else-if="optionsInfo.infoContent.tabsName ==='picture'">
                    <div class="picture-area">
<!--                                            {{optionsInfo.infoContent}}-->
                      <div class="swiper-container" ref="swiper" :key="widgetKey">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item,index) in (optionsInfo?.infoContent?.pictureInfo)"
                               :key="`${item.id}_${index}` || index"
                               :data-swiper-autoplay="`${(item.delay || 5)*1000}`"
                               v-swiper='{
                                  current:index,
                                  length:(optionsInfo?.infoContent?.pictureInfo).length
                               }'
                          >
                            <img class="picture" :class="{'fill': optionsInfo?.fill}" :src="getPictureSource(item.url)"
                                 alt="图片资源"/>
                          </div>
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                      <!--                      <img class="logo" :src="getPictureSource()" alt="图片"/>-->
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {getQueryString, pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import vueSeamlessScroll from 'vue-seamless-scroll';
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue'
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'
import {buildParentApi} from "@/utils/designer/util";
import {v4 as uuid} from "uuid";

export default {
  name: "scene-waiting-queue-info-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      number: 0,
      widgetKey: uuid(),
      optionsInfo: Object(),
    }
  },

  components: {
    ScrollY,
    ScrollX,
    CompOperate,
    vueSeamlessScroll,
  },

  computed: {
    // 温馨提示的滚动
    classOptionTips() {
      let {openScroll, waitingNumber, waitingVisitStep} = (this.optionsInfo)
      return {
        step: [1, 1.5, 2, 2.5, 3][waitingVisitStep], // 数值越大速度滚动越快
        hoverStop: true,
        limitMoveNum: openScroll ? waitingNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
        direction: 2 // 0向下 1向上 2向左 3向右
      };
    },

    // 栏目是否显示
    getColShow() {
      return function (val) {
        const self = this;
        let arr = (self.optionsInfo?.defaultShowCol) || Array();
        return arr.includes(val);
      };
    },

    // 患者的ClassName
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
          case 'deptName':
            return "deptName-name";
        }
      };
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "color", (info.headerFontColor));
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "lineHeight", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", (info.headerBackgroundColor));
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.lineHeight));
            return Obj;
        }
      };
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         */
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!(val.treatingPatient) && !!(val.treatingPatient.length)) {
              let currentPatient = Array();
              (val.treatingPatient).forEach((item) => {
                let temp = `${(item.orderNo) || '\u00a0'} ${(item.patientName) || '\u00a0'}`
                currentPatient.push(temp)
              })
              return (this.$lodash.join(currentPatient, ' '));
            } else {
              return '\u00a0'
            }
          case 1:
            return '暂停接诊';
        }
      }
    },

    // 列表的队列的患者
    waitingPatientInfos() {
      let list = Array();
      let devType = (this.devType);
      let {showRowNums} = (this.optionsInfo)
      let WaitingPatientList = this.$store.getters['getWaitingPatientInfo'];
      if (devType) {
        list = WaitingPatientList?.apiData || Array()
      } else {
        list = WaitingPatientList?.mockData || Array()
      }
      if (list?.length > showRowNums) {
        return list.slice(0, showRowNums);
      } else {
        let arr = (new Array(showRowNums - list.length).fill({}));
        return [...list, ...arr];
      }
    },

    // 拼接显示具体内容
    getColContent() {
      return function (val, key) {
        const self = this;
        let {registerObjNameKey, roomNameKey} = (self.optionsInfo) || Object();
        switch (key) {
            // 诊室&诊室简称
          case 'treatmentRoomName':
            return val[roomNameKey] || val[key] || '\u00a0'
          case 'registerObjNames':
            return val[registerObjNameKey] || val[key];
          default:
            return val[key] || '\u00a0'
        }
      }
    },

    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },

    // 获取视频资源
    getSource() {
      return function () {
        let {infoContent} = this.optionsInfo;
        let video = infoContent.videoContent || []
        if (video && video.length) {
          return `${video[this.number].url}?t=${this.getOnlyId()}&info=${video[this.number].url}`;
        }
      }
    },

    // 获取图片资源
    getPictureSource2() {
      return function () {
        let {infoContent} = this.optionsInfo;
        let pictureInfo = infoContent.pictureInfo || [];
        if (pictureInfo && pictureInfo.length) {
          return `${pictureInfo[0].url}?t=${this.getOnlyId()}&info=${pictureInfo[0].url}`;
        }
      }
    },

    // 获取图片资源
    getPictureSource() {
      return function (row) {
        console.log(`${row}?t=${this.getOnlyId()}`)
        return `${row}?t=${this.getOnlyId()}`
      }
    },

  },

  mounted() {
    this.handleOnMounted();
    this.$nextTick(() => {
      this.executeMethod('getVideoMedias')
    })
  },

  methods: {
    // 播放结束
    handleEnded(event) {
      let {infoContent} = this.optionsInfo;
      let video = infoContent.videoContent || [];
      let videoInfo = event.target.currentSrc;
      let info = getQueryString('info', videoInfo)
      const findIndex = this.$lodash.findIndex(video, {url: info})
      if (!this.$lodash.isUndefined(findIndex) && !this.$lodash.isNull(findIndex)) {
        let next = (findIndex + 1)
        if (video.length > next) {
          this.number = next;
          this.widgetKey = uuid();
        } else {
          this.widgetKey = uuid();
          this.number = 0
        }
      } else {
        this.widgetKey = uuid();
        this.number = 0
      }
    },

    // 等待候诊滚动结束
    handleScrollEnd() {
      if (self.$refs[`scroll-${row.workerId}`]) {
        console.log('等待就诊滚动结束');
        self.$nextTick(() => {
          self.$refs[`scroll-${row.workerId}`][0].reset()
        })
      }
    },

    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          this.$store.dispatch('setWaitingPatientInfo', patientList)
          break;
          //   关于视频播放
        case "getVideoMedias":
          let element = (this.$refs.videoInfo);
          if (element) {
            let params = Object();
            let info = (this.optionsInfo) || Array();
            const rect = element.getBoundingClientRect();
            const positionInfo = {
              width: Math.ceil(rect.width),
              height: Math.ceil(rect.height),
              top: parseInt(rect.top),
              right: parseInt(rect.right),
              bottom: parseInt(rect.bottom),
              left: parseInt(rect.left),
            };
            Reflect.set(params, 'positionInfo', positionInfo);
            Reflect.set(params, 'video', info['infoContent']['videoContent']);
            this.parentApi.executeParentMethod('playVideoMedias', params);
          }
          break
      }
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },


};
</script>

<style lang="scss" scoped>
.scene-waiting-queue-info-widget {
  background-color: transparent;
  color: #333;
  flex-direction: row;
  height: calc(100%);
  line-height: 100%;
  margin: 0 28px 0 28px;
  overflow: hidden;
  padding: 20px 0 16px 0;
  box-sizing: content-box;


  //左侧
  .list-inside {
    display: flex;
    flex-direction: column;
    border-radius: 20px !important;
    width: calc(56% - 8px);
    overflow: hidden;
    flex: inherit;
    border: 1px rgba(170, 170, 170, 0.75) solid;

    .header-area {
      width: 100%;
      display: flex;
      background-color: #0059b3;
      color: #fff;
      flex-grow: inherit !important;

      :deep(.item) {
        height: 90px;
        display: inline !important;
        align-self: center;
        align-items: center;
        text-align: center;
      }

      .wait-patient {
        height: 90px;
        display: inline !important;
        align-self: center;
        align-items: center;
        text-align: center;
      }
    }

    .list-area {
      width: 100%;
      display: flex;
      height: auto;
      background: white;
      flex-direction: column;
    }

    .waiting-item {
      display: flex;
      width: 100%;
      align-items: center;
      align-self: center;
      flex-direction: unset;
      flex-grow: 1;
      border-bottom: 1px rgba(170, 170, 170, 0.75) solid;

      .item {
        flex: 1;
        height: 110px;
        padding: 0 30px;
        line-height: 110px;
        @include singleEllipsis(100%);
        text-align: center;
        font-weight: normal;
        font-size: 42px;

        .scroll-item-inside {
          color: #000000;
          padding-right: 14px;
        }

        //诊室滚动
        :deep(.van-notice-bar) {
          @include fontWeight();
          background: transparent;
          height: 100%;
          width: 100%;
          font-size: 44px;

          .van-notice-bar__wrap {
            height: 100%;
            margin: 0 auto;
            @include fontWeight();
            color: #333333;
            font-size: 44px;
            overflow: hidden;
            width: 100%;
            text-align: left;

            > div {
              height: 100%;
              color: #000000;
              display: flex;
              font-weight: normal;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }

      .deptName-name,
      .patient-count {
        .item-inside {
          display: inline-block;
          background: rgba(0, 89, 179, 0.2);
          width: 100%;
          height: 82px;
          line-height: 82px;
          border-radius: 8px;
        }
      }

      .current-patient {
        display: flex;
        flex: 1.5;
        align-self: center;
        align-items: center;
        justify-content: center;

        span {
          display: flex;
          min-width: inherit;
          height: auto;
          align-items: center;
          align-self: center;
          font-size: 38px;
          background: rgba(0, 89, 179, 0.2);
          border-radius: 14px;
          padding: 4px 26px;
          min-height: 60px;
          line-height: 60px;
          color: #333333;
          @include singleEllipsis(260px);
          width: 100%;
          max-width: 100%;
        }
      }

      .wait-patient {
        flex: 3;
        overflow: hidden;
        display: flex;
        align-self: center;
        align-items: center;
        padding-right: 20px;

        ::v-deep .scroll {
          width: 100%;
          height: 80px;
          overflow: hidden;

          > div {
            height: 100%;
            overflow: hidden;

            > div {
              height: 100%;
            }
          }

          .inside-content {
            height: 100%;
            display: flex;
            align-self: center;
            align-items: center;
            overflow: hidden;

            .patient {
              height: auto;
              align-self: center;
              align-items: center;
              line-height: inherit;
              overflow: hidden;
              padding-right: 30px;
              font-size: 42px;
            }
          }
        }

        .no-scroll {
          padding-right: 20px;
          overflow: hidden;

          .inside-content {
            height: 100%;
            align-self: center;
            align-items: center;
            overflow: hidden;
            @include singleEllipsis(100%);
            display: block;

            .patient {
              height: auto;
              align-self: center;
              align-items: center;
              line-height: inherit;
              flex-basis: auto;
              padding-right: 20px;
              font-size: 42px;
            }
          }
        }

      }

      .patient-count {
        flex: 0.5;

        .item-inside {
          @include fontWeight();
        }

        .scroll-item-inside {
          padding-right: 0;
          font-family: "Times New Roman", "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, MicrosoftYaHeiLight, "Microsoft YaHei Light", "Microsoft YaHei";
        }
      }

      .register-name {
        flex: 1.5;
      }

      .waiting-info {
        @include singleEllipsis(100%)
      }
    }
  }

  //右侧
  .info-publish {
    display: flex;
    flex-direction: column;
    border-radius: 20px !important;
    width: calc(44% - 8px);
    overflow: hidden;
    flex: inherit;
    border: 1px rgba(170, 170, 170, 0.75) solid;

    :deep(.header-area) {
      flex-basis: 100%;
      min-width: 100%;
      display: flex;
      background-color: #0059b3;
      color: #fff;
      min-height: 86px !important;
      line-height: 1.4;
      font-size: 38px;
      text-align: center;
      align-self: center;
      align-items: center;
      justify-content: center;
      font-weight: normal;
    }

    .list-area {
      padding: 18px 26px;

      .list-area-wrap {
        font-weight: 400;
        height: 530px;
        overflow: hidden;
        font-size: 24px;
        color: #333333;
        line-height: 48px;
        text-indent: 2em;

        .doctor-connect {
          display: flex;
          justify-content: space-around;
          width: 100%;
          height: 100%;

          :deep(.container) {
            width: 100%;
            height: 100%;
            font-size: 28px;
            line-height: 52px;
            box-sizing: border-box;
            text-indent: 2em;

            .video-wrapper {
              height: 510px;
              width: 100%;
              background: rgba(232, 232, 232, 0.6);
              overflow: hidden;
              border-radius: 16px;
              position: relative;

              .video {
                position: absolute;
                inset: 0;
                overflow: hidden;
                border-radius: 8px;
                margin-top: -20px;
                width: 100%;
                height: 100%;
              }

              .video-area {
                width: 100%;
                height: 100%;
                min-width: 100%;
                overflow: hidden;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(0, 0, 0, 0.8);

                i {
                  font-size: 150px;
                  color: #EBEEF5;
                }
              }
            }

            .picture-area {
              width: 100%;
              height: 100%;
              overflow: hidden;
              text-indent: 0;

              img {
                width: 100%;
                height: 100%;
                text-indent: 0;
                object-fit: contain;
              }
            }
          }
        }
      }
    }

    .swiper-container {
      height: 100%;
      width: 100%;

      .swiper-slide {
        width: 100%;
        height: 100%;
        font-size: 38px;
        line-height: 76px;
        text-align: center;
        align-items: center;

        .picture {
          width: 100% !important;
          height: 100% !important;
          object-fit: contain !important;
        }

        .fill {
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
          object-position: center; /* 图片居中显示 */
        }
      }
    }
  }

}
</style>
